<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" trimDirectiveWhitespaces="true"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<link type="text/css" href="css/movie.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="css/elastislide.css" />
<script src="js/modernizr.custom.17475.js"></script>
<div id="contents">
	<%@ include file="../tiles/movmn.jspf" %>
	
	<div class="clearf">
	
		<ul id="tabmenu1">
			<li><h3><a href="mov.bi">예매순</a></h3></li>
			<li><h3><a href="mov_stars.bi">평점순</a></h3></li>
			<li><h3><a href="mov_title.bi">가나다순</a></h3></li>
			<!-- <li><a href="mov_palydate.bi">개봉예정</a></li> -->
		</ul>
		<hr class="clearf" />
	</div>
	<ul id="loca">
		<li><a href="index.bi">홈</a>&nbsp;&gt;</li>
		<li><a href="">영화</a></li>				
	</ul>
	<div id="movieposter">
		<!-- <h2 id="toplist">상위 목록</h2> -->
		<ul>
		<c:forEach var="mv" items="${ movielist }" >
			<li>
				<div class="mposter">
					<img src="image.bi?id=poster/${ mv.movno }.jpg" alt="영화 포스터" />
					<div class="box">
						<span id="chartmn">${ chartmn }<span>
						<c:choose>
							<c:when test="${ chartnum eq 1 }">${ mv.reservationrate }%&nbsp;</c:when>
							<c:when test="${ chartnum eq 2 }">${ mv.starsrating }&nbsp;</c:when>
							<c:when test="${ chartnum eq 3 }">${ mv.starsrating }&nbsp;</c:when>
							<c:when test="${ chartnum eq 4 }">${ mv.playdate }&nbsp;</c:when>
						</c:choose>
						</span></span>
						<h2 class="movietitle">${ mv.title }</h2>
						<p>
						<c:choose>
							<c:when test="${ mv.rate eq '1' }">전체 관람가</c:when>
							<c:when test="${ mv.rate eq '2' }">12세 관람가</c:when>
							<c:when test="${ mv.rate eq '3' }">15세 관람가</c:when>
							<c:when test="${ mv.rate eq '4' }">청소년 관람불가</c:when>
						</c:choose>
						</p>
						<p>${ mv.genre1 }</p>
						<p>${ mv.runningtime }</p>
						<p>${ mv.playdate }</p>			
						<div class="movbtn">
							<button type="button" class="infoBtn" onclick="location.href='mov_info.bi?movno=${mv.movno}'">상세</button>
						<button type="button" class="rsrvBtn" onclick="location.href='reservation.bi?movno=${mv.movno}'">예매</button>
						</div>
					</div>
				</div>
			</li>
		</c:forEach>			
		</ul>
	</div>
	<c:if test="${ not empty moviechart }">
	<div id="container">
		<div class="main">
			<h2>Movie Chart</h2>
			<ul id="carousel" class="elastislide-list">
				<c:forEach var="mv" items="${ moviechart }" >
					<li><a href="mov_info.bi?movno=${ mv.movno }"><img src="image.bi?id=poster/${mv.movno}.jpg" alt="image01" /></a></li>
				</c:forEach>
			</ul>		
		</div>
	</div>
	</c:if>
	<!-- // 이미지 목록-->
</div>

<!-- contents -->
<script type="text/javascript">
	var box = document.getElementsByClassName("box");
	var mposter = document.getElementsByClassName("mposter");
	for (var i=0; i<mposter.length; ++i) {ftbox(i);}	
	function ftbox(i) {
		$( mposter[i] ).hover(function() {$( box[i] ).slideToggle();});
	}
	 
	
</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquerypp.custom.js"></script>
<script type="text/javascript" src="js/jquery.elastislide.js"></script>
<script type="text/javascript">			
	$( '#carousel' ).elastislide();
</script>

		